<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div class="main-container">
        <a-form :model="formData">
          <a-row>
            <a-col :span="24">
              <a-form-item prop="code">
                <a-input
                  class="search-input-border search-input"
                  v-model="formData.code"
                  allow-clear
                  placeholder="请输入资产编号搜索"
                  @press-enter="getList"
                  @clear="clearInput('code')"
                  style="width: 328px"
                >
                  <template #suffix>
                    <icon-search @click="getList" class="cursor-pointer" />
                  </template>
                </a-input>
                <a-button
                  type="primary"
                  class="search-btn"
                  @click="isShowFormItem = !isShowFormItem"
                >
                  <template #icon>
                    <icon-filter style="color: #a3b0cc" />
                  </template>
                </a-button>
              </a-form-item>
            </a-col>
          </a-row>
          <div class="form-item" v-if="isShowFormItem">
            <a-row class="common-row">
              <a-col :span="8" class="common-col">
                <a-form-item>
                  <a-input
                    class="search-input-border search-input-width"
                    v-model="formData.name"
                    allow-clear
                    placeholder="请输入"
                    @press-enter="getList"
                    @clear="clearInput('name')"
                  >
                    <template #prefix>资产名称</template>
                    <template #suffix>
                      <icon-search @click="getList" class="cursor-pointer" />
                    </template>
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8" class="common-col">
                <a-form-item>
                  <a-input
                    class="search-input-border"
                    v-model="formData.owner_name"
                    allow-clear
                    placeholder="请输入"
                    @press-enter="getList"
                    @clear="clearInput('owner_name')"
                  >
                    <template #prefix>资产主体</template>
                    <template #suffix>
                      <icon-search @click="getList" class="cursor-pointer" />
                    </template>
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8" class="common-col">
                <a-range-picker
                  class=""
                  v-model="formData.createDate"
                  @change="selectBeginTime"
                  style="width: 100%"
                >
                  <template #prefix>录入日期</template>
                </a-range-picker>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8" class="common-col">
                <a-range-picker
                  class=""
                  v-model="formData.updateDate"
                  @change="selectUpdateTime"
                  style="width: 100%"
                >
                  <template #prefix>更新日期</template>
                </a-range-picker>
              </a-col>
            </a-row>
          </div>
        </a-form>
        <div class="table-container">
          <Tables
            :columns="columns"
            :list="list"
            operatorInfo="查看详情"
            @goToDetails="goToDetails"
          ></Tables>
        </div>
        <Pagination 
        :total="total"
        :currentPage = "commonParams.page"
        :pageSize="commonParams.page_size"
        @currentPage="changeCurrentPage" 
        @changeSize="changeSize" 
        />
      </div>
    </template>
  </PageMain>
</template>

<script lang="ts" setup>
import { ldegerList } from '@/api/ledger/index';
import PageMain from '@/components/PageBox.vue';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import Pagination from './components/Pagination.vue';
import Tables from './components/Tables.vue';
import { column } from './dataConfig';
import type { CommonFormType, FormType, ResultType } from './types/index';
let isShowFormItem = ref(false);
const router = useRouter();
const columns = column;
const list = ref<ResultType[]>([]);
let total = ref(0);
let commonParams = ref<CommonFormType>({
  page: 1,
  page_size: 10
});

let formData = ref<FormType>({
  code: '', // 资产编号
  name: '', // 资产名称
  owner_name: '', // 资产主体名称
  createDate: [], // 创建时间
  create_begin_time: '',
  create_end_time: '',
  updateDate: [], // 更新时间
  update_begin_time: '',
  update_end_time: ''
});

onMounted(() => {
  getList();
});

const getList = async () => {
  delete formData.value.updateDate;
  delete formData.value.createDate;
  const res:ResultType = await ldegerList({ ...commonParams.value, ...formData.value });
  console.log(res, '...===');
  if (res.message == '成功') {
    list.value = res.data;
    total.value = res.total;
  }
};
const clearInput = (val: string) => {
  formData.value[val] = '';
  getList();
};

const selectBeginTime = (val: string[]) => {
  formData.value.create_begin_time = `${val[0]} 00:00:00`;
  formData.value.create_end_time = `${val[1]} 23:59:59`;
  getList();
};

const selectUpdateTime = (val: string[]) => {
  formData.value.update_begin_time = `${val[0]} 00:00:00`;
  formData.value.update_end_time = `${val[1]} 23:59:59`;
  getList();
};

const changeCurrentPage = (current: number) => {
  console.log(current, 'current...');
  commonParams.value.page = current;
  getList();
};
const changeSize = (size: number) => {
  console.log(size, 'size...');
  commonParams.value.page_size = size;
  getList();
};

const goToDetails = (value: any) => {
  console.log(value)
  router.push({
    name: 'ledgerDetail',
    query: {
      id: value.id
    }
  });
};
</script>

<style lang="less" scoped>
@common-color: #d3dbeb;
@common-prefix-color: #a3b0cc;
.main-container {
  padding: 8px 24px 20px;
}
.search-input {
  width: 328px;
  border-radius: 4px;
  margin-right: 12px;
  background-color: #fff;
}
.search-input-border {
  border: 1px solid @common-color;
}
.search-input-width {
  width: 100%;
}
.search-btn {
  color: #1459fa;
  background-color: #f0f4fa;
}
.form-item {
  margin-top: 16px;
  padding: 20px 20px;
  // padding-top: 20px;
  // padding-left: 20px;
  // padding-bottom: 20px;
  background-color: #f7f9fc;
}
.common-row {
  margin-bottom: 16px;
}
.common-col {
  padding-right: 16px;
}
.table-container {
  margin-top: 20px;
}
.test {
  color: red;
  background-color: yellow;
}
::v-deep {
  // .search-input
  // .arco-input-wrapper,
  .common-row .arco-input-wrapper {
    background-color: #fff;
  }
  .arco-picker {
    background-color: #fff;
  }
  .arco-input::placeholder {
    color: @common-color;
    font-size: 14px;
  }
  .arco-input-prefix {
    color: @common-prefix-color;
  }
  .arco-form-item {
    display: block;
  }
  .arco-form-item {
    margin-bottom: 0;
  }

  .arco-btn-secondary {
    color: #1459fa;
    &:hover {
      color: #1459fa;
      background-color: unset;
    }
  }
  .arco-col-19 {
    width: 100%;
  }
  .arco-picker {
    border: 1px solid @common-color;
  }
  .arco-picker-prefix {
    color: @common-prefix-color;
  }
  .arco-picker-input input::placeholder {
    color: #d3dbeb;
  }
}
</style>
./types/types
